<template>
	<el-dialog v-model="visible" title="生产批次数据" width="80%" :before-close="handleClose">
		<ProTable ref="proTable" title="生产批次数据" :columns="columns" :request-api="getTableList" :init-param="initParam">
			<template #expand="scope">
				{{ scope.row }}
			</template>
		</ProTable>
	</el-dialog>
</template>

<script setup lang="tsx">
import { ref, reactive, watch, computed, onMounted } from 'vue';
import ProTable from '/@/components/ProTable/index.vue';

import { ProTableInstance, ColumnProps } from '/@/components/ProTable/interface';
import { fetchCreationList } from '/@/api/content';
import { ElMessage, ElMessageBox } from 'element-plus';
import { fenToYuan } from '/@/utils/commonFunction';

const props = defineProps({
	// 列表内容
	visible: {
		type: Boolean,
		default: () => false,
	},
	row: {
		type: Object,
		default: () => null,
	},
});

const emit = defineEmits(['handleClose']);

watch(
	() => props.visible,
	(val) => {
		visible.value = val;
	}
);

const step = ref(1);

// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref<ProTableInstance>();

// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({
	paramCode: 'id',
	paramTimeType: 'createTime',
});

// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getTableList"
const getTableList = (params: any) => {
	let data = {
		...params,
	};
	if (data.paramValue) {
		data[data.paramCode] = data.paramValue;
	}
	delete data.paramValue;
	delete data.paramCode;

	return fetchCreationList(data);
};

// 表格配置项
const columns: ColumnProps<any>[] = [
	{
		prop: 'paramValue',
		label: '批次搜索',
		isShow: false,
		search: {
			span: 2,
			render: (scope: any) => {
				const slot = {
					prepend: () => (
						<el-select
							v-model={scope.searchParam.paramCode}
							placeholder="Select"
							style="width: 100px"
							onChange={(value) => (scope.searchParam.paramCode = value)}
						>
							{searchArr.map((item) => (
								<el-option key={item.value} label={item.label} value={item.value} />
							))}
						</el-select>
					),
				};
				return <el-input v-model={scope.modelValue} v-slots={slot} placeholder={getPlaceholder.value} maxlength={50}></el-input>;
			},
		},
	},
	{
		prop: 'id',
		label: '生产批次号',
		minWidth: 100,
	},

	{
		prop: 'contentTitle',
		label: '在库总库存数量',
		minWidth: 120,
	},
	{
		prop: 'type',
		label: '非限制性库存数量',
		minWidth: 120,
	},
	{
		prop: 'target',
		label: '冻结库存数量',
		minWidth: 120,
	},
];

const searchArr = [
	{
		label: '生产批次号',
		value: 'id',
	},
];
const selectData = ref({});
const getPlaceholder = computed(() => {
	const target = searchArr.find((item) => {
		return item.value == proTable.value?.searchParam.paramCode;
	});
	return target ? `输入${target?.label}搜索` : '';
});

const visible = ref(false);

const onSubmit = async () => {
	if (!selectData.value.id) {
		ElMessage.warning('请选择活动');
		return;
	}
	const selectedList: any = proTable.value?.tableData.filter((item: any) => item.id == selectData.value.id);
	emit('handleClose', selectedList);
};

const handleClose = () => {
	emit('handleClose');
};

onMounted(() => {
	if (props.row) {
		step.value = 2;
	}
});
</script>

<style lang="scss">
.import-form {
	.el-form-item {
		width: 45%;
	}
}
</style>
